import styled from "@emotion/styled"
import { ReactNode } from "react"

const Container = styled.div`
    flex: none;
    font-family: Gilroy;
    width: 52rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
`

const Post = styled.img`
    width: 48rem;
    height: 66rem;
    object-fit: cover;
    border-radius: 4rem;
    overflow: hidden;
    background-color: pink;
`
const Text = styled.div`
    font-weight: 500;
    font-size: 10rem;
    height: 12rem;
    line-height: 12rem;
    text-align: center;
    color: #69728c;
    margin-top: 4rem;
`
const Win = styled.div`
    font-weight: 700;
    font-size: 12rem;
    height: 16rem;
    line-height: 16rem;
    text-align: center;
    color: #ff1f57;
`

export const BigWinItem = ({ img }: { img?: ReactNode }) => {
    return (
        <Container>
            <Post
                loading="lazy"
                alt=""
            />
            <Text>Fil***5</Text>
            <Win>₱290.7K</Win>
        </Container>
    )
}
